<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>甜蜜时光 - 甜品店预约</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }

        body {
            background-color: #fff5f5;
            color: #333;
            line-height: 1.6;
            max-width: 100%;
            overflow-x: hidden;
        }

        .container {
            width: 100%;
            padding: 0 15px;
            margin: 0 auto;
        }

        header {
            background-color: #ff6b81;
            color: white;
            padding: 15px 0;
            text-align: center;
            position: relative;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
        }

        .nav-icon {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
        }

        .main-nav {
            display: none;
            background-color: #ff8c9e;
            padding: 10px 0;
        }

        .main-nav.active {
            display: block;
        }

        .main-nav a {
            color: white;
            text-decoration: none;
            display: block;
            padding: 8px 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .hero {
            background-image: linear-gradient(rgba(255, 107, 129, 0.7), rgba(255, 107, 129, 0.7)), url('https://images.unsplash.com/photo-1551024506-0bccd828d307');
            background-size: cover;
            background-position: center;
            color: white;
            text-align: center;
            padding: 60px 20px;
            margin-bottom: 20px;
        }

        .hero h1 {
            font-size: 28px;
            margin-bottom: 15px;
        }

        .hero p {
            font-size: 16px;
            margin-bottom: 20px;
        }

        .btn {
            display: inline-block;
            background-color: white;
            color: #ff6b81;
            padding: 10px 25px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background-color: #ff6b81;
            color: white;
        }

        .section-title {
            text-align: center;
            margin: 30px 0 20px;
            color: #ff6b81;
            font-size: 24px;
        }

        .menu-items {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 30px;
        }

        .menu-item {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

        .menu-item:hover {
            transform: translateY(-5px);
        }

        .menu-item img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }

        .menu-item-info {
            padding: 15px;
        }

        .menu-item-name {
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 16px;
        }

        .menu-item-price {
            color: #ff6b81;
            font-weight: bold;
            font-size: 18px;
        }

        .booking-form {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        .form-control:focus {
            border-color: #ff6b81;
            outline: none;
        }

        .date-time-selector {
            display: flex;
            gap: 10px;
        }

        .date-time-selector select {
            flex: 1;
        }

        .submit-btn {
            width: 100%;
            padding: 12px;
            background-color: #ff6b81;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .submit-btn:hover {
            background-color: #ff4757;
        }

        .confirmation {
            display: none;
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 30px;
        }

        .confirmation.active {
            display: block;
        }

        .confirmation-icon {
            font-size: 50px;
            color: #4caf50;
            margin-bottom: 15px;
        }

        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 30px;
        }

        .social-icons {
            margin: 15px 0;
        }

        .social-icons a {
            color: white;
            margin: 0 10px;
            font-size: 20px;
        }

        .copyright {
            font-size: 14px;
            opacity: 0.8;
        }

        /* 响应式调整 */
        @media (max-width: 480px) {
            .menu-items {
                grid-template-columns: 1fr;
            }

            .date-time-selector {
                flex-direction: column;
            }
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            width: 90%;
            max-width: 400px;
            border-radius: 10px;
            overflow: hidden;
            animation: modalFadeIn 0.3s;
        }

        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .modal-header {
            background-color: #ff6b81;
            color: white;
            padding: 15px;
            position: relative;
        }

        .modal-close {
            position: absolute;
            right: 15px;
            top: 15px;
            font-size: 20px;
            cursor: pointer;
        }

        .modal-body {
            padding: 20px;
        }

        /* 加载动画 */
        .loader {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .loader.active {
            display: block;
        }

        .spinner {
            width: 40px;
            height: 40px;
            margin: 0 auto 15px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #ff6b81;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">-->
    <link rel="stylesheet" href="../fontawesome-free-6.7.2-web/css/all.min.css">
</head>
<body>
<header>
    <div class="container">
        <div class="logo">甜蜜时光</div>
        <div class="nav-icon" id="navToggle">
            <i class="fas fa-bars"></i>
        </div>
    </div>
    <nav class="main-nav" id="mainNav">
        <a href="#home">首页</a>
        <a href="#menu">甜品菜单</a>
        <a href="#booking">在线预约</a>
        <a href="#about">关于我们</a>
    </nav>
</header>

<section class="hero" id="home">
    <div class="container">
        <h1>甜蜜时光甜品店</h1>
        <p>为您带来最精致的甜品体验</p>
        <a href="#booking" class="btn btn-primary">立即预约</a>
    </div>
</section>

<div class="container">
    <section id="menu">
        <h2 class="section-title">我们的甜品</h2>
        <div class="menu-items" id="menuItems">
            <!-- 菜单项将通过JavaScript动态加载 -->
        </div>
    </section>

    <section id="booking">
        <h2 class="section-title">在线预约</h2>
        <div class="booking-form" id="bookingForm">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" class="form-control" placeholder="请输入您的姓名">
            </div>
            <div class="form-group">
                <label for="phone">电话</label>
                <input type="tel" id="phone" class="form-control" placeholder="请输入您的电话号码">
            </div>
            <div class="form-group">
                <label for="date">预约日期</label>
                <div class="date-time-selector">
                    <input type="date" id="date" class="form-control">
                    <select id="time" class="form-control">
                        <option value="">选择时间</option>
                        <option value="10:00">10:00</option>
                        <option value="11:00">11:00</option>
                        <option value="12:00">12:00</option>
                        <option value="13:00">13:00</option>
                        <option value="14:00">14:00</option>
                        <option value="15:00">15:00</option>
                        <option value="16:00">16:00</option>
                        <option value="17:00">17:00</option>
                        <option value="18:00">18:00</option>
                        <option value="19:00">19:00</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="guests">人数</label>
                <select id="guests" class="form-control">
                    <option value="1">1人</option>
                    <option value="2">2人</option>
                    <option value="3">3人</option>
                    <option value="4">4人</option>
                    <option value="5">5人</option>
                    <option value="6">6人以上</option>
                </select>
            </div>
            <div class="form-group">
                <label for="special">特殊要求</label>
                <textarea id="special" class="form-control" rows="3" placeholder="如有特殊要求请在此说明"></textarea>
            </div>
            <button type="button" class="submit-btn" id="submitBooking">提交预约</button>
        </div>

        <div class="loader" id="bookingLoader">
            <div class="spinner"></div>
            <p>正在提交预约...</p>
        </div>

        <div class="confirmation" id="bookingConfirmation">
            <div class="confirmation-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <h3>预约成功!</h3>
            <p id="confirmationDetails"></p>
            <p>我们期待您的光临!</p>
            <button type="button" class="btn btn-primary" id="newBooking">新的预约</button>
        </div>
    </section>
</div>

<footer>
    <div class="container">
        <h3>甜蜜时光甜品店</h3>
        <p>营业时间: 10:00 - 20:00 (周一至周日)</p>
        <p>地址: 甜蜜市甜点区糖街88号</p>
        <div class="social-icons">
            <a href="#"><i class="fab fa-weixin"></i></a>
            <a href="#"><i class="fab fa-weibo"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
        </div>
        <p class="copyright">© 2023 甜蜜时光甜品店 版权所有</p>
    </div>
</footer>

<!-- 甜品详情模态框 -->
<div class="modal" id="dessertModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalDessertName">甜品名称</h3>
            <span class="modal-close" id="modalClose">&times;</span>
        </div>
        <div class="modal-body">
            <img src="" alt="" id="modalDessertImage" style="width:100%; height:200px; object-fit:cover; margin-bottom:15px; border-radius:5px;">
            <p id="modalDessertDescription"></p>
            <p style="font-weight:bold; margin-top:10px;">价格: <span id="modalDessertPrice" style="color:#ff6b81;"></span></p>
            <button class="btn btn-primary" style="margin-top:15px; width:100%;" id="addToBooking">加入预约</button>
        </div>
    </div>
</div>

<script>
    // 测试数据 - 甜品菜单
    const dessertMenu = [
        {
            id: 1,
            name: "草莓慕斯蛋糕",
            price: 48,
            image: "./images/StrawberryMousseCake.jpg",
            description: "新鲜草莓制作的慕斯蛋糕，口感绵密，酸甜适中，是草莓爱好者的首选。"
        },
        {
            id: 2,
            name: "巧克力熔岩",
            price: 52,
            image: "./images/ChocolateLava.jpg",
            description: "热腾腾的巧克力熔岩蛋糕，切开后流出浓郁的巧克力酱，搭配香草冰淇淋更佳。"
        },
        {
            id: 3,
            name: "芒果班戟",
            price: 38,
            image: "./images/mangoPancake.jpg",
            description: "薄如蝉翼的班戟皮包裹着新鲜芒果和奶油，口感清爽不腻。"
        },
        {
            id: 4,
            name: "抹茶千层",
            price: 45,
            image: "./images/MatchaThousandLayers.jpg",
            description: "日式抹茶风味的千层蛋糕，层层叠加，茶香浓郁，回味悠长。"
        },
        {
            id: 5,
            name: "提拉米苏",
            price: 50,
            image: "./images/Tiramisu.png",
            description: "经典意大利甜品，咖啡与马斯卡彭奶酪的完美结合，口感丰富。"
        },
        {
            id: 6,
            name: "蓝莓芝士",
            price: 55,
            image: "./images/BlueberryCheesecake.jpg",
            description: "纽约芝士蛋糕搭配新鲜蓝莓，酸甜平衡，芝士浓郁。"
        }
    ];

    // 加载菜单项
    function loadMenuItems() {
        const menuContainer = document.getElementById('menuItems');
        menuContainer.innerHTML = '';

        dessertMenu.forEach(dessert => {
            const menuItem = document.createElement('div');
            menuItem.className = 'menu-item';
            menuItem.innerHTML = `
                    <img src="${dessert.image}" alt="${dessert.name}">
                    <div class="menu-item-info">
                        <div class="menu-item-name">${dessert.name}</div>
                        <div class="menu-item-price">¥${dessert.price}</div>
                    </div>
                `;
            menuItem.addEventListener('click', () => openDessertModal(dessert));
            menuContainer.appendChild(menuItem);
        });
    }

    // 打开甜品详情模态框
    function openDessertModal(dessert) {
        document.getElementById('modalDessertName').textContent = dessert.name;
        document.getElementById('modalDessertImage').src = dessert.image;
        document.getElementById('modalDessertImage').alt = dessert.name;
        document.getElementById('modalDessertDescription').textContent = dessert.description;
        document.getElementById('modalDessertPrice').textContent = `¥${dessert.price}`;

        // 设置"加入预约"按钮的数据属性
        const addToBookingBtn = document.getElementById('addToBooking');
        addToBookingBtn.setAttribute('data-dessert-id', dessert.id);
        addToBookingBtn.setAttribute('data-dessert-name', dessert.name);

        document.getElementById('dessertModal').style.display = 'flex';
    }

    // 关闭模态框
    function closeModal() {
        document.getElementById('dessertModal').style.display = 'none';
    }

    // 提交预约
    function submitBooking() {
        const name = document.getElementById('name').value.trim();
        const phone = document.getElementById('phone').value.trim();
        const date = document.getElementById('date').value;
        const time = document.getElementById('time').value;
        const guests = document.getElementById('guests').value;
        const special = document.getElementById('special').value.trim();

        // 简单验证
        if (!name || !phone || !date || !time) {
            alert('请填写完整的预约信息');
            return;
        }

        // 显示加载动画
        document.getElementById('bookingForm').style.display = 'none';
        document.getElementById('bookingLoader').classList.add('active');

        // 模拟API请求延迟
        setTimeout(() => {
            // 隐藏加载动画
            document.getElementById('bookingLoader').classList.remove('active');

            // 显示确认信息
            const confirmationDetails = document.getElementById('confirmationDetails');
            confirmationDetails.innerHTML = `
                    <strong>${name}</strong>，您已成功预约!<br>
                    预约时间: ${date} ${time}<br>
                    人数: ${guests}人<br>
                    联系电话: ${phone}
                `;

            document.getElementById('bookingConfirmation').classList.add('active');

            // 清空表单
            document.getElementById('name').value = '';
            document.getElementById('phone').value = '';
            document.getElementById('date').value = '';
            document.getElementById('time').value = '';
            document.getElementById('guests').value = '1';
            document.getElementById('special').value = '';

            // 记录预约到控制台
            console.log('新预约:', { name, phone, date, time, guests, special });
        }, 1500);
    }

    // 新的预约
    function newBooking() {
        document.getElementById('bookingConfirmation').classList.remove('active');
        document.getElementById('bookingForm').style.display = 'block';
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', () => {
        loadMenuItems();

        // 导航切换
        document.getElementById('navToggle').addEventListener('click', () => {
            document.getElementById('mainNav').classList.toggle('active');
        });

        // 关闭模态框
        document.getElementById('modalClose').addEventListener('click', closeModal);

        // 点击模态框外部关闭
        document.getElementById('dessertModal').addEventListener('click', (e) => {
            if (e.target === document.getElementById('dessertModal')) {
                closeModal();
            }
        });

        // 提交预约
        document.getElementById('submitBooking').addEventListener('click', submitBooking);

        // 新的预约
        document.getElementById('newBooking').addEventListener('click', newBooking);

        // 加入预约按钮
        document.getElementById('addToBooking').addEventListener('click', function() {
            const dessertName = this.getAttribute('data-dessert-name');
            const special = document.getElementById('special');
            special.value = special.value ? `${special.value}\n${dessertName}` : `我想品尝: ${dessertName}`;
            closeModal();

            // 滚动到预约表单
            document.getElementById('booking').scrollIntoView({ behavior: 'smooth' });
        });

        // 设置日期选择器的最小日期为今天
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('date').setAttribute('min', today);
    });
</script>
</body>
</html>